<template>
	<view class="will_be_cleaned">
		<!-- #ifdef APP-PLUS -->
		<top-set backgroundColor="#3595f9"></top-set>
		<tab-top imgSrc="/static/icon/white-back.png" fixed="true" bgColor="#3595f9" color="#FFFFFF" title="我的订单"></tab-top>
		<!-- #endif -->
		<view class="hotel" v-for="(item1,index1) in list" :key="index1" v-if="have == '1'">
			<view class="hotel_title">
				<view class="cheak_icon " :class="[item1.active?'cheak_icon_active':'']" @tap="cheakBtn1(index1)">
					<image src="/static/icon/dui.png" mode=""></image>
				</view>
				<view class="hotel_icon">
					<image src="/static/icon/hot_icon.png" mode=""></image>
				</view>
				<view class="hotel_name" @tap="cheakBtn1(index1)">{{item1.name}}</view>
				<view class="back_icon">
					<image src="/static/icon/right-333.png" mode=""></image>
				</view>
				<view class="hotel_state" @tap="arrivalBtn(item1)">我已到店</view>
			</view>
			<view class="hotel_order">
				<view class="hotel_order_box" v-for="(item2, index2) in item1.orderData" :key="index2">
					<view class="order_left">
						<view class="cheak_icon" :class="[item2.active?'cheak_icon_active':'']" @tap="cheakBtn2(index1,index2)">
							<image src="/static/icon/dui.png" mode=""></image>
						</view>
					</view>

					<view class="order_item" @tap="openDetail(item2.order_id)">
						<view class="item_up">

							<!-- <view class="item_img">
								<image :src="imgSrc1" mode=""></image>
							</view> -->
							<view class="item_content">
								<view class="room_name" scoped="nbsp">{{item2.room_no}}{{item2.room_type}} {{item2.storey}}楼</view>
								<view class="room_type">
									<view class="room_type_icon">
										<image src="/static/icon/xzfj.png" mode=""></image>
									</view>
									<view class="room_type_text">{{item2.roomtype}}</view>

								</view>
								<view class="room_position_box">
									<view class="room_position_icon" >
										<image src="/static/icon/time-999.png" mode=""></image>
									</view>
									<view v-if="item2.arrive_time == 0" class="room_position">{{item2.subscribe_msg }}</view>
									<view v-else class="room_position">到店时间 : {{item2.arrive_time | dataFilt}}</view>
								</view>

								<view class="room_yen"><text class="text1">预计收入&yen;</text><text class="text2">{{item2.real_amount}}</text>
								</view>

							</view>
						</view>
						<view class="item_down">
							<view class="btn1 btn" @tap.stop="orderFulfillment(index1,index2)">已打扫</view>
							<view class="btn2 btn" @tap.stop="close(index1,index2,item2.osid)">取消订单</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="have == '-1'" class="show">
			<view class="show_null">
				<image src="/static/bg/null.png" mode=""></image>
			</view>
			<view class="title">暂无订单哦！</view>
		</view>
		<view v-if="have == '0'"  class="show">
			<image style="position:absolute;top:30vh;left: 0;right: 0;margin: 0 auto; width:80upx;height: 80upx;" class="load_img"
			 src="/static/icon/loading.png" mode=""></image>
		</view>
		<view class="check_box_text" v-if="have == '1'">

		</view>
		<view class="check_box" v-if="have == '1'">

			<view class="check_box2">
				<view class="total">合计：&yen;{{totalPrice}}</view>
				<view class="cleaned" @tap="allClean">已经打扫</view>
			</view>
		</view>

		<layer v-if="layerShow">
			<view slot="text1">
				提示
			</view>
			<view slot="text2">
				{{layerTitle}}
			</view>
			<view slot="btn1" @tap="layerClose">取消</view>
			<view slot="btn2" @tap="layerFinish">确定</view>
		</layer>

	</view>
</template>

<script>
	let orderArr = [],
		allOrderNum = 0;
	import moment from "moment";
	import layer from "@/components/layer/layer.vue";
	export default {
		components: {
			layer
		},
		filters: {
			dataFilt: function(date) {
				let newDate = date*1000;
				if(newDate == 0){
					return '';
				}else{
					return moment(newDate).format('YYYY-MM-DD HH:mm')
				}
				
			}
		},
		data() {
			return {
				layerTitle:"",//遮罩层提示
				layerShow: false,//遮罩层
				list: [],
				active: false,
				imgSrc1: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558366264110&di=964bee9c4db1afe60c1b098014f6d968&imgtype=0&src=http%3A%2F%2Fimg.juimg.com%2Ftuku%2Fyulantu%2F110915%2F15-1109150P62810.jpg',
				totalPrice: 0.00,
				have: '0'
			}
		},
		methods: {
			openDetail(id) {
				uni.navigateTo({
					url: '/pages/cleaner/order/order-detile?id=' + id
				});
			},
			/**
			 * 获取数据
			 */
			getData() {
				return new Promise((res) => {
					this.req({
						url: "both/getCleanOrder",
						method: 'get',
						data: {
							cid: this.isLogin().id,
							position: this.isLogin().type,
							order_state: 20
						}
					}, (data) => {
						res(data)
					});
				});
			},
			/**
			 * 初始化
			 */
			async initialization() {
				orderArr = [];
				allOrderNum = 0;
				this.totalPrice = 0.00;
				this.have =  '0';
				let res = await this.getData();
				
				console.log(res);
				if (res.data.status == 1) {
					this.list = res.data.data.data ? this.dataAddButton(res.data.data.data) : [];
					allOrderNum = this.totalLength(this.list);
					this.have = '1';
				} else {
					this.have = '-1';
				}

				console.log(allOrderNum);
				console.log(this.list);
			}, 
			/**
			 * 计算该页面订单总数
			 */
			totalLength(arr) {
				let num = 0;
				arr.forEach((item1, index1) => {

					item1.orderData.forEach((item2, index2) => {
						num++;
					});

				});
				return num;
			},
			/**
			 * 添加按钮判断
			 */
			dataAddButton(arr) {
				let newArr = arr;
				for (let i = 0; i < newArr.length; i++) {
					newArr[i].active = false;

					for (let j = 0; j < newArr[i].orderData.length; j++) {
						newArr[i].orderData[j].active = false;
					}
				}
				return newArr;
			},
			/**
			 * 全选
			 */
			cheakBtn() {

				if (!this.active) {

					this.active = true;

					this.list.forEach((item1, index1) => {

						item1.active = true;

						item1.orderData.forEach((item2, index2) => {

							if (!item2.active) {
								this.totalPrice += item2.real_amount * 1;
								item2.active = true;
								orderArr.push(item2.osid);
								orderArr = Array.from(new Set(orderArr));
							}


						});

					});

				} else {

					this.active = false;

					this.list.forEach((item1, index1) => {

						item1.active = false;

						item1.orderData.forEach((item2, index2) => {

							item2.active = false;



						});


					});
					this.totalPrice = 0.00;
					orderArr = [];
				}

				console.log(orderArr);

			},
			/**
			 * 选中酒店
			 */
			cheakBtn1(index1) {

				let item = this.list[index1];

				if (!item.active) {

					item.active = true;

					item.orderData.forEach((item1, index1) => {

						if (!item1.active) {
							item1.active = true;
							orderArr.push(item1.osid);
							orderArr = Array.from(new Set(orderArr));
							this.totalPrice = this.accAdd(item1.real_amount * 1,this.totalPrice * 1);
						}


					});
					this.totalPrice = this.totalPrice.toFixed(2) * 1;
				} else {

					item.active = false;

					item.orderData.forEach((item1, index1) => {

						item1.active = false;

						orderArr.forEach((item2, index2) => {

							if (item1.osid == item2) {
								this.totalPrice = this.accSub(this.totalPrice *1 ,item1.real_amount * 1);
								
								console.log(this.totalPrice);
								orderArr.splice(index2, 1);

							}

						});

					});
					this.totalPrice = this.totalPrice.toFixed(2) * 1;
				}

				if (orderArr.length == allOrderNum) {

					this.active = true;

				} else {

					this.active = false;

				}

				console.log(orderArr);
			},
			/**
			 * 选中订单
			 */
			cheakBtn2(index1, index2) {

				let item = this.list[index1].orderData[index2];
				let actNum = 0;
				console.log(item);
				this.list[index1].orderData.forEach((itemNum, indexNum) => {

					if (itemNum.active) {

						actNum++;

					}

				});

				if (!item.active) {

					item.active = true;
					orderArr.push(item.osid);
					this.totalPrice = this.accAdd(item.real_amount * 1,this.totalPrice * 1);
					this.totalPrice = this.totalPrice.toFixed(2) * 1;
					if (actNum + 1 == this.list[index1].orderData.length) {

						this.list[index1].active = true;

					}
					


				} else {
					item.active = false;

					orderArr.forEach((item1, index1) => {

						if (item1 == item.osid) {

							orderArr.splice(index1, 1);
							this.totalPrice = this.accSub(this.totalPrice *1 ,item.real_amount * 1);
							
							
						}

					});
					this.totalPrice = this.totalPrice.toFixed(2) * 1;
					if (actNum - 1 < this.list[index1].orderData.length) {

						this.list[index1].active = false;

					}



				}


				if (orderArr.length == allOrderNum) {

					this.active = true;

				} else {

					this.active = false;

				}

			},
			/**
			 * 取消订单
			 */
			detelData(id) {

				return new Promise((res) => {

					this.req({
						url: 'both/cancelOrder',
						method: 'get',
						data: {
							id: id,
							position: 1,
							uid: this.isLogin().id
						}
					}, (data) => {
						res(data)
					})

				})
			},
			/**
			 * 删除订单
			 */
			close(index1, index2, id) {
				this.layerTitle = "确定取消订单么?";
				
				this.openClose(async () => {


					
					let res = await this.detelData(id);

					if (res.data.status == 1) {
						
						this.list[index1].orderData.splice(index2, 1);
						allOrderNum--;
						this.statistics();

						if (this.list[index1].orderData.length <= 0) {
							this.list.splice(index1, 1);
						}

						if (allOrderNum <= 0) {
							this.have = '-1'
						}
						console.log(res.title);
						uni.showToast({
							icon: 'none',
							title: res.data.title
						});

					} else {

						uni.showToast({
							icon: 'none',
							title: '请稍后重试'
						});

					}




				});

			},
			/**
			 *  保洁打扫完成
			 *
			 */
			finishClean(orderArr) {
				return new Promise((res) => {
					this.req({
						url: 'both/finishClean',
						method: 'get',
						data: {
							cid: this.isLogin().id,
							order_data: orderArr
						}
					}, (data) => {
						res(data);
					});
				})
			},
			/**
			 *  订单完成事件
			 */
			orderFulfillment(index1, index2) {

				let hotelId = this.list[index1].id;
				let osId = this.list[index1].orderData[index2].osid;
				let orderArr1 = JSON.stringify([osId]);
				
				
				
				
				
				
				console.log(orderArr);
				console.log(hotelId);
				this.layerTitle = "已打扫订单确认";
				this.openClose(async () => {
					let res = await this.finishClean(orderArr1);
					if (res.data.status == 1) {
						
						this.list[index1].orderData.splice(index2, 1);
						allOrderNum--;
						this.statistics();

						if (this.list[index1].orderData.length <= 0) {
							this.list.splice(index1, 1);
						}

						if (allOrderNum <= 0) {
							this.have = '-1'
						}

						uni.showToast({
							icon: 'none',
							title: '已打扫完成'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message
						});
					}

				});
			},
			/**
			 * both/arrivalHotel get
			 * 我已到店
			 */
			arrivalHotel(hotelId) {
				return new Promise((res) => {
					this.req({
						url: 'both/arrivalHotel',
						method: 'get',
						data: {
							hotel_id: hotelId,
							clean_id: this.isLogin().id
						}
					}, (data) => {
						res(data.data);
					});
				});
			},
			/**
			 * 打扫按钮
			 */
			async allClean() {
				if (orderArr.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '尚未选择订单'
					})
					return;
				}
				let arr = JSON.stringify(orderArr);
				this.layerTitle = "已打扫确认";
				this.openClose(async () => {


					let res = await this.finishClean(arr);
					if (res.data.status == 1) {
						
						this.initialization();
						
						orderArr = [];
						uni.showToast({
							icon: 'none',
							title: '已打扫完成'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message
						});
					}

				});
			},

			/**
			 * 到店按钮
			 */
			async arrivalBtn(item) {
				
				let location = await this.getLocation();
				console.log(location);
				let formNum = this.getFlatternDistance(location.latitude,location.longitude,item.hotel_latitude * 1, item.hotel_longitude * 1);
				
				if(formNum > 500){
					uni.showToast({
						icon: 'none',
						title: '距离该酒店过远'
					})
					return;
				}
				
				
				let res = await this.arrivalHotel(item.id);
				if (res.status == 1) {
					uni.showToast({
						icon: 'none',
						title: '已到店',
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '您已到店',
					})
				}
			},
			/**
			 * 获取当前地址
			 */
			getLocation(){
				return new Promise((res)=>{
					uni.getLocation({
						type: 'wgs84',
						success: function (data) {
							res(data);
							// console.log('当前位置的经度：' + res.longitude);
							// console.log('当前位置的纬度：' + res.latitude);
						}
					});
				});
			},
			/**
			 * 蒙层返回完成
			 */
			layerFinish() {


			},
			/**
			 * 关闭蒙层
			 */
			layerClose() {
				this.layerShow = false;
			},
			/**
			 * 打开蒙层
			 */
			openClose(callback) {
				this.layerShow = true;
				this.layerFinish = () => {
					this.layerClose();
					callback();
				}
			},
			/**
			 * 计算合计数和当前钱数
			 */
			statistics(){
				let price = 0,
				arr = []; 
				this.list.forEach((item1, index1) => {
				
					item1.orderData.forEach((item2, index2) => {
				
						if (item2.active) {
							price = this.accAdd(price * 1,item2.real_amount * 1);
							
							
							arr.push(item2.osid);
							orderArr = Array.from(new Set(orderArr));
						}
				
				
					});
				
				});
				orderArr = arr;
				this.totalPrice = price;
				console.log(orderArr);
			}

		},
		mounted() {

		},
		computed: {

		},
		onLoad() {

		},
		onShow() {
			this.totalPrice = 0;
			orderArr = [];
			this.initialization();
		}
	}
</script>
<style>
	page{
		background: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.load_img {
		-webkit-animation: myfirst 1.5s linear infinite;
	}

	@keyframes myfirst {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg)
		}
	}

	.cheak_icon {
		float: left;
		height: 40upx;
		width: 40upx;
		border: 1upx solid #999999;
		box-sizing: border-box;
		border-radius: 50%;
		transform: translateY(-4upx);

		image {
			display: none;
			float: left;
			height: 100%;
			width: 100%;
		}
	}

	.cheak_icon_active {
		float: left;
		height: 40upx;
		width: 40upx;
		border: 0 !important;

		image {
			display: block !important;
			float: left;
			height: 100%;
			width: 100%;
		}
	}

	.show {
		position: relative;
		width: 100vw;
		/* #ifdef APP-PLUS */
		height: calc( 100vh - var(--status-bar-height) - 86upx);
		/* #endif */
		/* #ifndef APP-PLUS */
		height: calc( 100vh );
		/* #endif */
		box-sizing: border-box;
		padding-top: 190upx;
		background: #FFFFFF;
		.show_null {
			
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 345upx;
				height: 310upx;
			}
		}

		.title {
			position: absolute;
			width: 100%;
			top: 410upx;
			left: 0;
			text-align: center;
			font-size: 32upx;
		}
	}
	// .will_be_cleaned{
	// 	min-height: 100vh;
	// 	background: #F8F8F8;
	// }
	.will_be_cleaned>.hotel {
		
		.hotel_title {
			height: 98upx;
			box-sizing: border-box;
			padding: 40upx 24upx 0 24upx;
			position: relative;

			.hotel_name {
				float: left;
				color: #333333;
				font-size: 28upx;
				line-height: 1;
				margin-left: 17upx;
			}

			.hotel_state {
				float: right;
				color: #ffb718;
				font-size: 28upx;
				line-height: 1;
				margin-left: 29upx;
				border: 1upx solid #ffb718;
				padding: 16upx 24upx;
				transform: translateY(-18upx);
				border-radius: 8upx;
			}

			.hotel_icon {
				width: 28upx;
				height: 28upx;
				float: left;
				margin-left: 22upx;

				image {
					width: 100%;
					height: 100%;
					float: left;
				}
			}

			.back_icon {
				float: left;
				width: 28upx;
				height: 28upx;
				margin-left: 24upx;

				image {
					width: 100%;
					height: 100%;
					float: left;
				}
			}
		}

		// .hotel_title:after{
		// 	content: '';
		// 	position: absolute;
		// 	left: 24upx;
		// 	bottom: 0;
		// 	height: 1upx;
		// 	width: calc( 100% - 48upx);
		// 	background: #E5E5E5;
		// 	transform: scaleY(0.5);
		// }
		.hotel_order {
			width: 100%;
			height: auto;
			padding: 30upx 24upx 52upx 24upx;
			box-sizing: border-box;
			position: relative;

			.order_item:nth-last-of-type(1) {
				margin-bottom: 0upx;

			}

			.hotel_order_box {
				height: 273upx;
				width: 100%;
				margin-bottom: 22upx;

				.order_left {
					display: inline-block;
					height: 100%;
					width: 60upx;

					.cheak_icon {
						margin-top: 113upx;
					}
				}

				.order_item {
					display: inline-block;
					height: 273upx;
					width: calc(100% - 60upx);

					// margin-left: 60upx;
					background: #FFFFFF;
					border-radius: 8upx;
					box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, 0.04);
					position: relative;

					.item_up {
						height: 148upx;
						width: 100%;



						.item_img {
							float: left;
							margin-left: 33upx;
							width: 160upx;
							height: 120upx;

							image {
								border-radius: 8upx;
								float: left;
								width: 100%;
								height: 100%;
							}
						}

						.room_yen {
							position: absolute;
							right: 30upx;
							bottom: 125upx;

							color: #333333;
							line-height: 1;
							margin-top: 20upx;

							.text1 {
								font-size: 24upx;
							}

							.text2 {
								font-size: 32upx;
							}
						}

						.item_content {
							float: left;
							margin-left: 30upx;
							padding-top: 34upx;
							box-sizing: border-box;

							.room_name {
								color: #333333;
								font-size: 28upx;
								line-height: 1;
							}


							.room_position_box {
								height: 24upx;
								margin-top: 20upx;

								.room_position {
									font-size: 24upx;
									color: #999999;
									line-height: 1;
									float: left;
									margin-left: 12upx;
								}

								.room_position_icon {
									float: left;
									width: 24upx;
									height: 24upx;

									image {
										width: 24upx;
										height: 24upx;
										float: left;
									}
								}
							}

							.room_type {
								margin-top: 25upx;
								height: 28upx;

								.room_type_icon {
									width: 28upx;
									height: 28upx;
									float: left;

									image {
										width: 100%;
										height: 100%;
										float: left;
									}
								}

								.room_type_text {
									margin-left: 12upx;
									font-size: 28upx;
									color: #999999;
									line-height: 1;
									float: left;
								}
							}
						}
					}

					.item_down {
						margin-top: 34upx;
						height: 58upx;

						.btn {
							width: 160upx;
							height: 58upx;
							text-align: center;
							line-height: 58upx;
							float: right;
							box-sizing: border-box;
							border: 1upx solid;
							font-size: 28upx;
							border-radius: 8upx;
						}

						.btn1 {
							margin-right: 30upx;
							color: #3595f9;
							border-color: #3595f9;
						}

						.btn2 {
							color: #999999;
							border-color: #e5e5e5;
							margin-right: 40upx;
						}
					}
				}
			}
		}

		// .hotel_order:after {
		// 	content: '';
		// 	position: absolute;
		// 	left: 0;
		// 	bottom: 0upx;
		// 	height: 22upx;
		// 	width: 100%;
		// 	background: #E5E5E5;
		// }
	}

	.will_be_cleaned>.check_box_text {
		height: 98upx;
		width: 100%;
	}

	.will_be_cleaned>.check_box:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: #e5e5e5;
		height: 1upx;
		content: '';
		transform: scaleY(0.5);
	}

	.will_be_cleaned>.check_box {
		height: 98upx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;

		.check_box1 {
			width: 100%;
			height: 170upx;
			box-sizing: border-box;
			padding: 81upx 24upx 0 24upx;

			.check_btn {

				.cheak_text {
					margin-left: 31upx;
					float: left;
					color: #333333;
					font-size: 28upx;
					line-height: 28upx;
				}
			}
		}

		.check_box2 {
			width: 100%;
			height: 94upx;

			.total {
				float: left;
				margin-left: 27upx;
				margin-top: 30upx;
				color: #333333;
				font-size: 28upx;
				line-height: 28upx;
			}

			.cleaned {
				float: right;
				width: 375upx;
				height: 90upx;
				text-align: center;
				color: #FFFFFF;
				font-size: 32upx;
				line-height: 90upx;
				background-color: #3595f9;
				border-radius: 8upx 0px 0px 8upx;
			}
		}
	}
</style>
